<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../../assets/zjt.png" alt="" class="back" @click="back()" />
        <div v-show="status != 1">
          <img src="../../assets/shoucang.png" alt="" v-show="store == false" @click="storeOn(0)" />
          <img src="../../assets/shoucang_1.png" alt="" v-show="store == true" @click="storeOn(1)" />
          <img src="../../assets/jubao.png" alt="" @click="report()" />
          <img src="../../assets/fenxiang.png" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="con-top">
        <span>{{ recruit.title }}</span>
        <span>{{ recruit.salaryRange }}</span>
      </div>
      <div class="con-title">
        <div>
          <img src="../../assets/add.png" alt="" />
          {{ company.location }}
        </div>
        <div>
          <img src="../../assets/gzjy.png" alt="" />
          {{ recruit.workYearRange }}
        </div>
        <div>
          <img src="../../assets/xueli.png" alt="" />
          {{ recruit.eduBgdRange }}
        </div>
      </div>
      <div class="hr">
        <img :src="companyUser.userPortrait" alt="" class="hr-avatar" />
        <div class="hr-div">
          <p>{{companyUser.userName}}<span>刚刚活跃</span></p>
          <span>{{ recruit.companyName }}&nbsp;·&nbsp;{{ companyUser.accountName }}</span>
        </div>
        <img src="../../assets/yjt.png" alt="" class="yjt" />
      </div>
      <div class="post">
        <p class="post-p">职位详情</p>
        <div class="skill">
          <!-- <span>{{JobDetail.recruit.positionType}}</span> -->
          <span v-for="(item, i) in welfare">{{ item }}</span>
        </div>
        <div class="skillText">
          {{ recruit.description }}
          <br />

        </div>
      </div>
      <div class="firm">
        <div class="firm-top" @click="goFirm(company.id)">
          <img :src="company.logo" alt="" class="firm-avatar" />
          <div class="firm-div">
            <p>{{ recruit.companyName }}</p>
            <span class="firm-span"> {{ company.scale }}&nbsp;·&nbsp;{{ company.industry }} </span>
          </div>
          <img src="../../assets/yjt.png" alt="" class="yjt" />
        </div>
        <div class="firm-add">
          <img src="../../assets/ditu.jpg" alt="" />
          <img src="JobDetail.company.addressPath" alt="" />
          <!-- {{JobDetail.company.addressPath}} -->
        </div>
      </div>
      <div class="post">
        <p class="post-p">相似职位</p>
        <div class="block" v-for="item in likeList" @click="goDtl(item)">
          <div class="block-top">
            <span>{{ item.title }}</span>
            <span>{{ item.salaryRange }}</span>
          </div>
          <div class="block-class">
            <span>{{ item.workYearRange }}</span>
            <span>{{ item.eduBgdRange }}</span>
          </div>
          <div class="block-btn">
            <span>{{ item.companyName }}</span>
            <span>{{ item.regionName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-show="status != 1">
      <div class="bottom" @click="deliver()">
        <div>立即投递</div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox, Toast } from 'mint-ui'
import Vue from 'vue'
export default {
  inject: ['reload'],
  name: 'post',
  components: { MessageBox, Toast },
  mounted () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data () {
    return {
      status: localStorage.status,
      store: false,
      jumpPath: null,
      id: 0,
      recruit: {
        title: null,
        salaryRange: null,
        workYearRange: null,
        eduBgdRange: null,
        companyName: null,
        description: null
      },
      recruitId: this.$route.params.recruitId,
      company: {},
      companyUser: {},
      likeList: [],
      welfare: [],
      JobDetail: {
        recruit: {

        },
        company: {

        },
        sameRecruit: [

        ]
      }
    }
  },
  created () {
    // 初始化页面时的回调方法，然后在下面methods调用（首页详情）
    this.initData();
  },
  // methods 编写js函数
  methods: {
    initData() {
      // 获取跳转路径
      if (this.$route.params.jumpPath) {
        this.jumpPath = this.$route.params.jumpPath;
      }
      console.log(this.jumpPath, "=========");

      //在index里插入缓存，从该方法中取出缓存
      let globel_recruitId = localStorage.getItem("globel_recruitId");
      let globel_data = localStorage.getItem("globel_data");
      // 初始化获取招聘编号
      if (globel_recruitId) {//如果存在的话
        this.recruitId = globel_recruitId//把传递过来的招聘id赋予给当前页面的招聘编号
      } else {//如果不存的话，再从路由中再去取，同时赋予给缓存
        //赋给当前页面对象
        this.recruitId = this.$route.params.recruitId
        //赋予给缓存的（这是以前自带的，先保留不删）
        localStorage.recruitId = this.$route.params.recruitId
        //赋予给缓存的
        localStorage.setItem('globel_recruitId', this.$route.params.recruitId);
      }
      // 初始化获取选中行数据对象,(首页每一个招聘对象的数据）
      //声明一个局部变量数据内容
      let selectRowRecruitData = globel_data;
      if (selectRowRecruitData) {//recruit 招聘对象
        this.recruit = JSON.parse(selectRowRecruitData);//json字符串转变成json对象（json对象可以直接继续调用）
      } else {//如果不存在的话，把其赋予给缓存
        this.recruit = this.$route.params.data;
        localStorage.setItem("globel_data", this.$route.params.data)
      }
      //初始化获取招聘相关数据，渲染页面数据（其余页面没有的信息init）
      this.init(this.recruitId)
      //查询此职位是否收藏
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/query/collect',
        params: {
          resumeId: this.recruitId,
          type: 1,
          userId: userId,
        }
      }).then(({data}) => {
        if (data.data) {
          this.store = true;
        } else {
          this.store = false;
        }
      })

      console.log("==============", this.recruitId);
    },
    // 个人收藏职位
    collect () {
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/save/collect',
        params: {
          resumeId: this.recruitId,
          type: 1,
          userId: userId,
        }
      }).then(({data}) => {
          if (data.data) {
            Toast('收藏成功')
          } else {
            Toast('收藏失败')
          }
      })
    },
    // 个人取消收藏职位
    cancelCollect () {
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/un/collect',
        params: {
          resumeId: this.recruitId,
          type: 1,
          userId: userId,
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('取消收藏成功')
        } else {
          Toast('取消收藏失败')
        }
      })
    },
    // 初始化
    init (id) {
      // 根据招聘职位id，查询职位页面信息
      this.$http({
        method: "get",//get是取数据，
        url: Vue.prototype.AppURL +  '/index/company/detail?id='+id,//问号是参数，第一个id是键， 第二个id是值
      })
      .then(({data}) => {
        //根据职位id查询的结果
        this.company = data.company;//公司
        if (this.company) {
          this.company.logo = Vue.prototype.AppURL + '/file/' + data.company.logo
        }
        this.likeList = data.list;//相似职位
        this.companyUser = data.companyUser;//招聘者
        if (this.companyUser) {
          this.companyUser.userPortrait = Vue.prototype.AppURL + '/file/' + data.companyUser.userPortrait
        }
        this.welfare = data.welfare;//福利待遇
        console.log(data);
      })
    },
    back () {
      console.log(this.jumpPath, "-----------")
      //this.$router.go(-1) // 返回上一层
      if (this.jumpPath) {
        this.$router.go(-1)
        // this.$router.push({name: this.jumpPath});
      } else {
        this.$router.push({name: 'index'});
      }
    },
    // 跳转公司详情
    goFirm (id) {
      this.$router.push({name: 'companyFirm', params: { 'companyId': id }});

      localStorage.setItem('globel_company_detail', JSON.stringify(this.company));
      localStorage.setItem('globel_company_user_detail', JSON.stringify(this.companyUser));
    },
    goDtl (item) {
      localStorage.setItem('globel_recruitId', item.id);
      localStorage.setItem('globel_data', JSON.stringify(item));
      this.initData();
    },
    storeOn (i) {
      if (i === 0) {
        this.store = true
        // 个人收藏表添数据
        this.collect()
      } else if (i === 1) {
        MessageBox.confirm('确定要取消收藏该职位吗?')
          .then((action) => {
            this.store = false
            // 个人收藏表删除数据
            this.cancelCollect()
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    report () {
      let userId = localStorage.getItem("userId");
      this.$http({
        method: "get",
        url: Vue.prototype.AppURL +  '/index/query/complaint',
        params: {
          companyId: this.company.id,
          userId: userId,
        }
      }).then(({data}) => {
        if (data.data) {
          Toast('您已经举报过该职位了')
        } else {
          MessageBox.confirm('确定要举报该职位吗?', {showInput: true}).then((action) => {
            this.$http({
              method: "get",
              url: Vue.prototype.AppURL +  '/index/save/complaint',
              params: {
                companyId: this.company.id,
                content: action.value,
                userId: userId,
              }
            }).then(({data}) => {
              if (data.data) {
                Toast('举报成功')
              } else {
                Toast('举报失败')
              }
            })
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    deliver () {
      if (!this.recruitId) {
        return
      }
      let collectId = this.recruitId;
      let userId = localStorage.getItem("userId");
      // 检测简历信息是否完善
      this.$http({
        method: 'get',
        params: {
          userId: userId
        },
        url: 'api/userResume/checkPersonResume'
      }).then(({data}) => {
        if (data && data.data) {
          //检测是否已经投递过
          this.$http({
            method: 'get',
            url: 'api/userResume/checkDeliverVita',
            params: {
              'recruitId': collectId,
              'userId': localStorage.getItem('userId')
            }
          }).then(({data}) => {
            console.log(data)
            if (!data.data) {
              MessageBox.confirm('确定要投递该职位吗?').then((action) => {
                this.$http({
                  method: 'get',
                  url: 'api/userResume/doDeliverVita',
                  params: {
                    'recruitId': collectId,
                    'userId': localStorage.getItem('userId')
                  }
                }).then(({data}) => {
                  console.log(data)
                  if (data.data) {
                    Toast('投递成功')
                  } else {
                    Toast('投递失败')
                  }
                })
              }).catch((err) => {
                console.log(err)
              })
            } else {
              Toast('简历已投递过啦')
            }
          })
        } else {
          Toast('投递失败，简历不完善，请先完善简历！')
          this.$router.push({name: 'usersResume'});
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}

.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}

.head {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  background: #fff;
  justify-content: space-between;
  /* border-bottom: 1px solid #dfdfdf; */
  /* box-shadow: 2px 2px 5px #c7c7c7; */
}

.head div {
  display: flex;
  width: 30%;
  justify-content: space-between;
}

.back {
  width: 14px;
  height: 14px;
}

.head div img {
  width: 20px;
  height: 20px;
}

.content {
  position: relative;
  top: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 40px 10px;
}

.con-top {
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.con-top span:first-child {
  font-weight: 900;
  font-size: 20px;
}

.con-top span:last-child {
  font-size: 16px;
  color: #3e63a8;
}

.con-title {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding-bottom: 15px;
}

.con-title div {
  padding-right: 20px;
  display: flex;
  font-size: 12px;
}

.con-title div img {
  width: 14px;
  height: 14px;
}

.hr {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px 0;
  border: 1px solid #dfdfdf;
  border-left: 0;
  border-right: 0;
  align-items: center;
}

.hr-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.yjt {
  width: 14px;
  height: 14px;
}

.hr-div {
  display: flex;
  flex: 1;
  flex-flow: column;
  font-size: 12px;
}

.hr-div p {
  padding-bottom: 5px;
  font-weight: 900;
}

.hr-div p span {
  font-weight: 500;
  font-size: 10px;
  color: #757575;
  margin-left: 10px;
}

.post {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
}

.post-p {
  font-weight: 900;
  font-size: 12px;
  padding: 10px 0;
}

.skill {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.skill span {
  background: #f3f3f3;
  color: #333;
  font-size: 12px;
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.skillText {
  padding-bottom: 10px;
  font-size: 12px;
}

.firm {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0;
  border: 1px solid #dfdfdf;
  border-left: 0;
  border-right: 0;
  display: flex;
  flex-flow: column;
}

.firm-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  align-items: center;
}

.firm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.yjt {
  width: 14px;
  height: 14px;
}

.firm-div {
  display: flex;
  flex: 1;
  flex-flow: column;
}

.firm-div p {
  padding-bottom: 5px;
  font-weight: 900;
  font-size: 12px;
}

.firm-span {
  font-size: 12px;
}

.firm-add {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}

.firm-add img {
  width: 100%;
  height: 100%;
}

.block {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
}

.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.block-top span:first-child {
  color: #333;
  font-weight: 700;
}

.block-top span:last-child {
  color: #3e63a8;
}

.block-calss {
  width: 100%;
}

.block-class span {
  background: #f0f0f0;
  color: #757575;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 10px;
}

.block-company {
  font-size: 12px;
  color: #757575;
}

.block-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #757575;
}

.bottom {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 5px;
  position: fixed;
  z-index: 999;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #dfdfdf;
}

.bottom div {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  background: #3e63a8;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 30px;
  font-size: 14px;
}
</style>
